<template>
<div>
	<van-icon class="gotop" @click="goTop" name="back-top"  size="40" />
    
    <GoBack>
        <span slot="content" class="set-title">精彩活动</span>
    </GoBack>
	<Loading v-if = "actives.length == 0"></Loading>
    <template v-else v-for="item in actives">
        <div class="content" :key="item.id">
            <a href="" class="active-wrap">
                <div class="img">
                    <img :src="item.coverImage" alt="">
                </div>
                <div class="stopTime">{{item.activityEndTime}} 截止</div>
                <div class="title-wrap">
                    <span>[结束]</span>
                    <span class="active-title">
                        {{ item.coverTitle}}
                    </span>
                </div>
                <div class="sponsor">{{ item.coverSummary}}</div>
            </a>
        </div>
    </template>
    <div class="download-wrap" ref="close">
        <div style="position:absolute;top:0px;left:0px;bottom:0px;z-index:2;width:88%;"></div>
        <div style="position:absolute;top:0px;right:0px;bottom:0px;z-index:2;width:12%;" @click="close" ></div>
        <img  src="https://image.hongbeibang.com/FknQIBFrTaqk0CkZaBetkJ1i0NX_?imageMogr2/strip/thumbnail/750x750" alt="">
    </div>
	
</div>
</template>

<script>
import GoBack from './GoBack'
import Vue from 'vue';
import { Icon } from 'vant';

Vue.use(Icon);
import axios from 'axios'
    export default {
        data () {
            return {
                // 活动列表
                actives:[],
            }
        },
        

        components:{
        GoBack,
        },
        
      async   mounted () {  
          let res = await this.$api.getActivitys({
			  pageIndex:0,
			  pageSize:100
		  })
		  // console.log(res.data.data)
		  this.actives = res.data.data;
		 window.addEventListener("scroll",e=>{
			 let scroll = document.documentElement.scrollTop;
		 })
        },
        methods:{
            close(){
                this.$refs.close.style = "display:none"
            },
			goTop(){
				document.documentElement.scrollTop = 0
			}
        }
    }
</script>

<style lang="scss" scoped>
	.gotop{
		position: fixed;
		right: 5%;
		bottom: 15%;
		z-index: 5;
		background-color: #FFFFFF;
		border-radius: 20px;
		font-size: 14px;
	}
    .content{
        width: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
        zoom: 1;
        display: flex;
        flex-direction: column;
        .active-wrap{
            text-decoration: none;
            width: 100%;
            background-color: #FFFFFF;
            display: block;
            position: relative;
            padding: 10px 15px 20px 15px;
            box-sizing: border-box;
            margin: 0 autp;
            overflow: hidden;
            .img{
                width: 100%;
                border-radius: 4px;
                overflow: hidden;
                font-size: 0;
                box-sizing: border-box;
                border: 1px solid;
                border-color: #E7E2E5;
                img{
                    width: 100%;
                }
            }
            .stopTime{
                height: 22px;
                line-height: 22px;
                margin: 10px;
                float: right;
                font-size: 11px;
                color: #999999;
            }
            .title-wrap{
                margin: 10px auto 5px auto;
                line-height: 22px;
                font-size: 16px;
                color: #4A4945;
                overflow: hidden;
                text-overflow: ellipsis;
                -otext-overflow: ellipsis;
                -webkit-text-overflow: ellipsis;
                -moz-text-overflow: ellipsis;
                white-space: nowrap;
            }
            .sponsor{
                    line-height: 20px;
                    font-size: 14px;
                    color: #999999;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: box;
                    display: -moz-box;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -moz-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                    -moz-box-orient: vertical;
                    box-orient: vertical;
                    word-break: break-all;
                    max-height: 40px;
                }
        }
    }

.download-wrap{
    width: 100%;
    position: fixed;
    bottom: -4px;
    z-index: 10;
    overflow: hidden;
    img{
        width: 100%;
    }
}
</style>
